<HTML>
  <HEAD>
    <META http-equiv="Content-Type" content="text/html; charset=utf-8">
    <META name="GENERATOR" content="BLOCKNOTE.NET">
    <META name="source">
    <BASEFONT face="Verdana" size=2>
    <TITLE></TITLE><STYLE>BODY { FONT-FAMILY:Verdana; FONT-SIZE:10pt; background-color:#fffeef }
P { FONT-FAMILY:Verdana; FONT-SIZE:10pt }
DIV { FONT-FAMILY:Verdana; FONT-SIZE:10pt }
TD { FONT-FAMILY:Verdana; FONT-SIZE:10pt }

.i1:hover { transition:none; /* stop animation when hover */ }

.i2 { transition:none; /* stop animation by default */ }
.i2:hover { transition:image; /* start animation only when hover */ }

#test { behavior:dropdown; }
#test popup
{ 
	padding:4px;
	background-color:white #c7c5c6 #c7c5c6 #c7c5c6;
	border-left: 1px solid gray;
	border-top: 1px solid gray;
	border-right: 1px solid black;
	border-bottom: 1px solid black;
	text-align:center;
}


</STYLE>
  </HEAD>
<BODY>

<P>gif image: <IMG src="test.gif"> animated gif image: <IMG class="i1" src="floppy.gif">
another one: <IMG src="http://terrainformatica.com/htmlayout/images/apple.gif">
</P>
<P>Move mouse over the image to stop animation.</P>
<div id="test" style="border:1px solid black; max-width:auto">
      Click here to see animation on popup window.
	  <popup>
		  <img src="smiley/aola.gif">
	  </popup>
</div>

<P>Move mouse over this image: <IMG class="i2" src="smiley/hi.gif"> <b>to start</b> animation.</p>
</P>
<P>This is also <IMG class="i2" src="progress.gif"> animation-on-demand sample.</p>
</P>



<p>animated gif image: <IMG src="36_1_10.gif"></p>

</BODY>
</HTML>